<template>
  <div class="form-single-fragment" style="position: relative;">
    <div class="title">
      <h4>项目计划</h4>
      <el-button type="primary" size="mini" @click="setPlans" v-if="verifyStatus!=1">计划变更</el-button>
    </div>
    <div class="fullCalendarCont">
      <full-calendar
        ref="calendar"
        :config="config"
        :events="events"></full-calendar>
    </div>
    <div class="annotation" v-if="setPlanbox">
      <setPlan ref="setPlan" @getPlans="getPlans" v-model="setPlanbox"></setPlan>
    </div>
  </div>
</template>

<script>
import { Administration } from '@/api/projectAdministration.js';
import { FullCalendar } from 'vue-full-calendar'
import 'fullcalendar/dist/fullcalendar.css';
import setPlan from './Plansadd.vue';
export default {
  name: 'Projectsadd',
  components: { setPlan, FullCalendar },
  data () {
    return {
      setPlanbox: false,
      loading: false,
      isShowloading: false,
      verifyStatus: '',
      config: {
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay,list'
        },
        buttonText: {today: '今天', month: '月', week: '周', day: '日', list: '日程' },
        locale: 'zh-cn',
        defaultView: 'month', // 显示默认视图
        // weekMode: 'liquid',
        // weekNumbers: true,
        // height: 'auto',
        timeFormat: '-', // HH:mm
        navLinks: true, // can click day/week names to navigate views
        eventLimit: 3, // 限制一天中显示的事件数，默认false
        allDayText: '排班', // 日历上显示全天的文本
        selectable: true, // 允许用户通过单击或拖动选择日历中的对象，包括天和时间。
        selectHelper: false, // 当点击或拖动选择时间时，显示默认加载的提示信息，该属性只在周/天视图里可用。
        unselectAuto: true, // 当点击页面日历以外的位置时，自动取消当前的选中状态。
        eventBackgroundColor: '#3a87ad' // 设置日程事件的背景色
        // select: this.selectHandler,
        // eventClick: this.eventClick
      },
      events: []
    }
  },
  created () {

  },
  mounted () {
    this.verifyStatus = this.$route.query.verifyStatus
    this.loadDetailWidgetData()
  },
  methods: {
    /**
     * 项目计划
     */
    loadDetailWidgetData () {
      let params = {
        projectId: this.$route.query.projectId
      };
      return new Promise((resolve, reject) => {
        Administration.planlist(this, params).then(res => {
          let listData = res.data
          this.events = []
          listData.forEach((item, index) => {
            let obj = {
              title: item.planName, // 事件内容
              start: item.beginDate, // 事件开始时间
              end: item.endDate, // 事件结束时间
              color: '#409EFF' // 事件的显示颜色
            }
            this.events.push(obj)
          })
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 日程
    selectHandler (start, end, allDay) {
      let startFormat = this.$moment(start).format('YYYY-MM-DD');
      let endFormat = this.$moment(end).format('YYYY-MM-DD');
      console.log('from === ' + startFormat + '====to === ' + endFormat + '====allDay====' + allDay);
      // 添加日历
      var json = {
        title: '张三' + ' - ' + '夜班',
        text: '张三',
        allDay: allDay,
        backgroundColor: '#3a87ad',
        start: start.format('YYYY-MM-DD'),
        end: end.format('YYYY-MM-DD')
      };
      this.events.push('renderEvent', json, true);
    },
    // 更新排班
    eventClick (calEvent, jsEvent, view) {
      console.log('calEvent === ' + calEvent + '====jsEvent === ' + jsEvent + '====view====' + view);
    },
    /**
     * 创建计划
     */
    setPlans (data) {
      this.setPlanbox = true
      this.$nextTick(() => {
        this.$refs.setPlan.info()
      })
    },
    getPlans (data) {
      let params = {
        saveDto: {
          ...data
        }
      };
      return new Promise((resolve, reject) => {
        Administration.plansave(this, params).then(res => {
          this.$message({
            showClose: true,
            message: '操作成功！',
            type: 'success'
          });
          this.loadDetailWidgetData()
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 查看
    handleInfo (data) {
      this.$router.push({path: '/TasksaddDetail', query: {TasksId: data.id}})
    }
  }
}
</script>

<style lang="scss" scoped>
.title{
  display: flex;align-items: center;justify-content: space-between;
  h4{font-weight: bold;}
}
.blue{background: #409EFF;color: #FFFFFF;padding: 5px;}
</style>
